<template>
  <my-activity-modal
    :show="state.modalOne"
    title="欢迎体验10皇后比赛"
    confirm-text="开心收下"
    @chnage="state.modalOne = false"
  >
    <template #icon>
      <image
        style="width: 160px; height: 160px; margin: -125px 0 4px"
        src="https://images-cloud.qboson.com/miniProgram/quota_package.png"
      />
    </template>
    <view style="margin-bottom: 24px; color: #963e32; text-align: center">
      <view style="margin: -2px 0 20px; font-size: 12px">
        送你配额加油包，助力赢取奖品
      </view>
      <text style="font-size: 44px; line-height: 44px; font-weight: 800"
        >5</text
      >
      <text style="margin-left: 5px; font-size: 14px">配额</text>
    </view>
  </my-activity-modal>

  <my-activity-modal
    :show="state.modalShare.show"
    title="恭喜你获得"
    confirm-text="开心收下"
    @chnage="state.modalShare.show = false"
  >
    <template #icon>
      <image
        style="width: 160px; height: 160px; margin: -125px 0 8px"
        src="https://images-cloud.qboson.com/miniProgram/quota_package.png"
      />
    </template>
    <view style="margin-bottom: 24px; color: #963e32; text-align: center">
      <view>
        <text style="font-size: 44px; font-weight: 1000">
          {{ state.modalShare.quantity_count }}
        </text>
        <text style="margin-left: 5px; font-size: 14px">配额</text>
      </view>
      <view style="font-size: 12px">以下好友通过你的分享，成功参与活动！</view>
      <view style="display: flex; justify-content: center; padding-top: 10px">
        <image
          v-for="item in state.modalShare.result"
          :key="item.user_id"
          style="
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 1px solid #fff;
            margin-left: -10px;
          "
          :src="item.avatar"
        />
        <view
          v-if="state.modalShare.result.length > 3"
          style="
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 1px solid #fff;
            margin-left: -10px;
            background: #963e32;
            color: #ffffff;
            font-size: 11px;
            text-align: center;
            line-height: 32px;
          "
        >
          {{ state.modalShare.result.length }}
        </view>
      </view>
    </view>
  </my-activity-modal>

  <my-activity-modal
    :show="state.modalTaskadd"
    title="量子计算机计算"
    :show-cancel-button="true"
    @close="state.modalTaskadd = false"
    @confirm="handSubmitTask"
  >
    <template #icon>
      <image
        style="width: 88px; height: 88px; margin: -88px 0 24px"
        src="https://images-cloud.qboson.com/miniProgram/task_create.gif"
      />
    </template>
    <view class="submit-task-content">
      <view class="des">
        使用量子计算机计算，将会消耗等量的配额。当前您的配额次数为
        {{ state.quantity }}次
      </view>
      <view style="display: flex; align-items: center">
        <text>本次计算次数：</text>
        <view class="number-box">
          <view
            :class="`icon ${state.enterQuota <= 1 && 'disabled'}`"
            @click="state.enterQuota--"
          >
            <up-icon name="minus" size="16"></up-icon>
          </view>
          <text class="input">
            {{ state.enterQuota }}
          </text>
          <view
            :class="`icon ${state.enterQuota >= maxEnterQuota && 'disabled'}`"
            @click="state.enterQuota++"
          >
            <up-icon name="plus" size="16"></up-icon>
          </view>
        </view>
      </view>
      <view style="margin-top: 12px">
        本次消耗配额：{{ state.enterQuota }}
      </view>
    </view>
  </my-activity-modal>
  <my-activity-modal
    :show="state.modalTaskok"
    title="提交成功"
    content="您的任务已成功提交至量子计算机，任务的计算进度可在【个人记录】中查看哦~"
    confirm-text="好的"
    @chnage="state.modalTaskok = false"
  >
    <template #icon>
      <image
        style="width: 88px; height: 88px; margin: -88px 0 24px"
        src="https://images-cloud.qboson.com/miniProgram/task_create.gif"
      />
    </template>
  </my-activity-modal>
  <my-activity-modal
    :show="state.modalTaskno"
    title="提交失败"
    content="您的配额不足，无法计算。可以试试邀请好友，获得更多配额哦~"
    confirm-text="好的"
    @chnage="state.modalTaskno = false"
  >
    <template #icon>
      <image
        style="width: 88px; height: 88px; margin: -88px 0 24px"
        src="https://images-cloud.qboson.com/miniProgram/task_no.gif"
      />
    </template>
  </my-activity-modal>

  <my-activity-modal
    :show="state.modalTaskEnd"
    title="活动已经结束啦"
    confirm-text="我知道啦"
    @chnage="state.modalTaskEnd = false"
  >
    <template #icon>
      <image
        style="width: 88px; height: 88px; margin: -85px 0 9px"
        src="https://images-cloud.qboson.com/miniProgram/task_no.gif"
      />
    </template>
    <view style="margin-bottom: 10px; color: #963e32; font-size: 12px">
      因真机资源紧张，十皇后游戏提前终止，感谢大家的积极参与，获奖用户将于三月统一为大家发放奖金。
    </view>
  </my-activity-modal>
</template>

<script setup lang="ts">
import myActivityModal from "@/components/my-activity-modal.vue";
import Api from "@/utils/http";
import state, { maxEnterQuota, getConfig } from "../useState";

const handSubmitTask = async () => {
  const res: any = await Api.post(
    "queen/",
    { task_num: state.enterQuota },
    { returnCode: true }
  );
  state.modalTaskadd = false;
  if (res.code === "0") {
    state.modalTaskok = true;
    setTimeout(() => {
      getConfig();
    }, 1000);
  } else {
    state.modalTaskno = true;
  }
};
</script>

<style scoped lang="scss">
.submit-task-content {
  width: 100%;
  margin-bottom: 50px;
  font-size: 12px;
  line-height: 100%;
  color: rgba(150, 62, 50, 0.7);
  .des {
    margin: -2px 0 16px;
    text-align: center;
    line-height: 170%;
  }
  .number-box {
    display: flex;
    gap: 2px;

    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 4px;
      background: #ffffff;
      ::v-deep {
        text {
          color: #f35645 !important;
        }
      }
      &.disabled {
        background-color: #fffefd;
        pointer-events: none;
        ::v-deep {
          text {
            color: #cccbca !important;
          }
        }
      }
    }
    .input {
      width: 40px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      border-radius: 4px;
      background: #ffffff;
      font-size: 13px;
      font-weight: 500;
      color: #333333;
    }
  }
}
</style>
